<template>
	<view class="product">
		<!-- 商品介绍banner -->
		<!-- <dot :info="imgList" :current="current" mode="block" backgroundColor="#fff"> -->
		<view class="header-banner">
			<view v-if="$getGlobalData('notice')" class="header-title">
				<uni-notice-bar :showClose="true" :scrollable="true" :showIcon="true" color="#6EAEA6"
					background-color="#E9F5F5" single="true" :text="$getGlobalData('notice')"></uni-notice-bar>
			</view>

			<swiper class="swiper-img" @change="onBanner" :current="current">
				<swiper-item v-for="(item, idx) in imgList" :key="idx">
					<image :src="item.src" mode="scaleToFill" class="item" @click="previewImgHandler(idx)"></image>
				</swiper-item>
			</swiper>
			<image class="label" src="../../static/product/t1.png" mode="scaleToFill"></image>
		</view>
		<!-- </dot> -->
		<!-- 商品介绍 -->
		<view class="name">
			<view class="price-area1 mt20">
				<!-- 非活动商品时 -->
				<view class="left1" v-if="userLevel===''">
					<text class="m">¥</text>
					<text class="l">{{data.lowestSalePrice}}</text>
					<text class="r">/天起</text>
					<text class="right1">官方售价{{ returnMinMarketPrice() }}元起</text>
				</view>
				<!-- 当是活动商品时 -->
				<view class="left1" v-else>
					<text class="m">¥</text>
					<text class="l">{{data.lowestSalePrice}}</text>
					<text class="r">/天</text>
					<text class="right1">官方售价{{ returnMinMarketPrice() }}元起</text>
				</view>
			
			</view>
			<view class="title cX mt20">
				<image class="w20 mr5" src="../../static/product/t2.png" mode="scaleToFill" style="width: 93rpx;height: 44rpx;"></image>
			   <!-- 	<text class="title-tops">{{ getOldNewText(data.oldNewDegree) }}</text> -->
				<view class="fx1">
					<text class="title-text ">{{ data.name }}</text>
				</view>
			</view>
			<view class="bcX mt20 ">
				<view class="labels">
					<view class="items">
						<text class="item">顺丰快递</text>
						<text class="item " style="line-height: 20rpx;">.</text>
						<text class="item">全新国行</text>
						<text class="item" style="line-height: 20rpx;">.</text>
						<text class="item">全网通</text>
						<text class="item" style="line-height: 20rpx;">.</text>
						<text class="item">非监管机</text>
					</view>
				</view>
				<view class="leased">已租{{ data.salesVolume || 0 }}</view>
			</view>
			
		</view>
		<!-- 优惠券运费 -->
		<view class="select-content">
			<view class="coupon">
				<view class="describe">
					<text class="pd">优惠券</text>
					<text class="red">
						<text v-if="couponList && couponList.length" @click="$refs.couponList.show()">
							{{ couponList[0].discountAmount }}元优惠券
						</text>
						<text v-else>暂无优惠券</text>
						<image mode="scaleToFill" class="arrow" src="../../static/my/jiantou.png"></image>
					</text>
				</view>
				<view class="describe">
					<text class="pd">运费</text>
					<text class="black">{{ getfreight() }}</text>
				</view>
			</view>
		</view>
		<!-- 商家信息 -->
		<view class="businessInformation plr30 ptb20">
			<view class="cX" style="width: 500rpx;">
				<view class="left-img ">
					<image :src="shopLogo" mode="scaleToFill"
						style="width: 128rpx;height: 128rpx;border-radius: 10rpx;"></image>
				</view>

				<view class="left-tit ml20 bY fx1">
					<view class="shopTit ml5">
						{{shopName}}
					</view>
					<view class="cY ">
						   <image src="../../static/business/T6.png" mode="scaleToFill"
							style="width: 40rpx;height: 34rpx;"></image>
							<view class="ziZhi ml5">
								商家资质
							</view>
							<image class="ml5" src="../../static/my/jiantou.png" mode="scaleToFill"
								style="width: 16rpx;height: 24rpx;"></image>
					</view>
					<view class="cY ml5" >
						<image src="../../static/business/T5.png" mode="scaleToFill"
							style="width: 32rpx;height: 30rpx;"></image>
						<view class="serviceBusiness " style="white-space:nowrap">
							最专业的租赁服务商
						</view>
					</view>
				</view>
			</view>
			<!-- 进店逛逛 -->
			<image src="../../static/business/A1.png" @click="enterStore()" mode="scaleToFill"
				style="width: 146rpx;height: 50rpx;position: absolute;top: 20rpx;right: 30rpx;"></image>
		</view>
		<!-- 商品详情 -->
		<view class="details">
			<view class="tabs">
				<view v-for="(item, index) in tabs" :key="index" class="item" @tap="onSelectCurrent(index)" :style="{
            marginRight: index === 0 ? '83rpx' : 0,
            fontWeight: selectCurrent === index ? 700 : 400,
          }">
					{{ item }}
					<view class="select" v-if="selectCurrent === index"></view>
					<view class="select" style="visibility: hidden" v-else></view>
				</view>
			</view>
			<view class="parameter" v-if="selectCurrent === 0">
				<!-- <view v-if="data.parameters.length">
					商品参数
					<view class="parameterItem">
						<t-table border-color="#DEDEDE">
							<t-tr v-for="(item, index) in data.parameters" :key="index">
								<t-td width="40%">{{ item.name }}</t-td>
								<t-td width="60%">{{ item.value }}</t-td>
							</t-tr>
						</t-table>
					</view>
				</view> -->
				商品介绍
				<mp-html :content="data.detail" :lazy-load="true" />
			</view>
			<view class="explain" v-else>
				<image class="explain-img" src="https://oss.microzuji.com/cf524510e9bb401b8c3b3bab21c2dda8.jpeg"
					mode="scaleToFill" :lazy-load="true"></image>
			</view>
		</view>
		<!-- 为你推荐 -->
		<view class="wntj">
			<view style="text-align: center">
				<image src="../../static/product/wntj.png" mode="scaleToFill" :lazy-load="true" class="imgtitle">
				</image>
			</view>
			<view class="productList">
				<view v-for="(obj, idx) in recommendLite" :key="idx" class="product-item">
					<productItem :productObj="obj" :showTag="true" :isWaterfallFlow="false">
						<XinjiuSlot slot="topLeft" :productObj="obj"></XinjiuSlot>
					</productItem>
				</view>
			</view>
		</view>
		<!-- 底部tab按钮功能 -->
		<view class="footer">
			<view class="home" @tap="$onTo('/pages/index/index', true)" style="margin-left: 20rpx;">
				<image src="../../static/activehome.png" mode="scaleToFill" class="home-img"></image>
				<view class="text">首页</view>
			</view>
			<view class="home" style="margin-left: 40rpx;">
				<image src="../../static/product/scno.png" mode="scaleToFill"
					:class="{ 'home-img': true, hide: collected }" @click="addProductCollection"></image>
				<image src="../../static/product/scyes.png" mode="scaleToFill"
					:class="{ 'home-img': true, hide: !collected }" @click="cancelProductCollection"></image>
				<view class="text">收藏</view>
			</view>
			<view class="bot" @tap="$refs.contact.show()" style="margin-left: 32rpx;">联系客服</view>
			<view class="bot_my" @tap="$refs.productDetails.show()" style="margin-left: 20rpx;"> 免押租 </view>
		</view>
		<!--联系客服popup-->
		<wyb-popup ref="contact" type="bottom" height="372" width="500" radius="6" :showCloseIcon="true" title="联系客服">
			<view class="contact">
				<view class="item">
					<view class="item-left">
						<view class="title">平台客服</view>
						<view class="fu">服务时间 9:30-18:00</view>
					</view>

					<image class="item-right" @click="onPhone" src="../../static/product/sjkf.png" mode="scaleToFill">
					</image>
				</view>
				<view class="item">
					<view class="item-left">
						<view class="title">在线客服</view>
						<view class="fu">在线云客服帮您解决问题</view>
					</view>
					<!-- 支付宝智能客服 -->
					<!-- alipay-card-no:动值上线需要更换 -->
					<contact-button :tnt-inst-id="information.tntInstId" :scene="information.scene" size="32"
						:alipay-card-no="thirdId" icon="../../static/product/zxkf.png" />
				</view>
			</view>
		</wyb-popup>
		<!-- 免押租popup -->
		<wyb-popup ref="productDetails" type="bottom" width="500" radius="6" :showCloseIcon="true">
			<view class="productDetails">
				<view class="shop" style="height: 170rpx">
					<image :src="data.images[0].src" mode="scaleToFill" class="img"></image>
					<view class="content">
						<view class="price-area">
							<!-- 当活动商品时,该用户是A等级 -->
							<!-- 	<view class="left"
								v-if="userLevel=='A'&&rentGoodsId===credit_goodsid&&rentGoodsId!=''&&credit_goodsid!=''"> -->
							<view class="left" v-if="userLevel=='A'">
								<text class="m">¥</text>
								<text class="l">
									{{
                  getPartMoney(true,  choiceCycs.aprice)
                }}
								</text>
								<text class="d">.</text>
								<text class="r">
									{{
                  getPartMoney(false,  choiceCycs.aprice)
                }}
								</text>
								<text class="r">/天</text>
							</view>
							<!-- 当活动商品时,该用户是B等级 -->
							<!-- <view class="left"
								v-if="userLevel=='B'&&rentGoodsId===credit_goodsid&&rentGoodsId!=''&&credit_goodsid!=''"> -->
							<view class="left" v-if="userLevel=='B'">
								<text class="m">¥</text>
								<text class="l">
									{{
							  getPartMoney(true,  choiceCycs.bprice)
							}}
								</text>
								<text class="d">.</text>
								<text class="r">
									{{
							  getPartMoney(false,  choiceCycs.bprice)
							}}
								</text>
								<text class="r">/天</text>
							</view>
							<!-- 当活动商品时,该用户是C等级 -->
							<!-- 	<view class="left"
								v-if="userLevel=='C'&&rentGoodsId===credit_goodsid&&rentGoodsId!=''&&credit_goodsid!=''"> -->
							<view class="left" v-if="userLevel=='C'">
								<text class="m">¥</text>
								<text class="l">
									{{
										  getPartMoney(true,  choiceCycs.cprice)
										}}
								</text>
								<text class="d">.</text>
								<text class="r">
									{{
										  getPartMoney(false,  choiceCycs.cprice)
										}}
								</text>
								<text class="r">/天</text>
							</view>
							<!-- 当活动商品时,该用户是S等级 -->
							<!-- <view class="left"
								v-if="userLevel=='S'&&rentGoodsId===credit_goodsid&&rentGoodsId!=''&&credit_goodsid!=''"> -->
							<view class="left" v-if="userLevel=='S'">
								<text class="m">¥</text>
								<text class="l">
									{{
													  getPartMoney(true,  choiceCycs.sprice)
													}}
								</text>
								<text class="d">.</text>
								<text class="r">
									{{
													  getPartMoney(false,  choiceCycs.sprice)
													}}
								</text>
								<text class="r">/天</text>
							</view>
							<!-- 当非活动商品时 -->
							<view class="left" v-if="userLevel===''">
								<text class="m">¥</text>
								<text class="l">
									{{
							  getPartMoney(true, choiceCycs.price)
							}}
								</text>
								<text class="d">.</text>
								<text class="r">
									{{
							  getPartMoney(false, choiceCycs.price)
							}}
								</text>
								<text class="r">/天</text>
							</view>
							<!-- 添加 到期买断价-->
							<view class="center">
								<text class="z">到期买断价</text>
								<text class="m">¥</text>
								<text class="l">{{
                    choiceCycs.buyOutPrice
                  }}</text>
							</view>
							<view><text class="fut">轻松续租</text>
								<text class="fut"
									v-if="buyOutSupportType[data.buyOutSupport]">{{ buyOutSupportType[data.buyOutSupport] }}</text>
								<text class="fut" v-if="returnRuleType[data.returnRule]">{{
                  returnRuleType[data.returnRule]
                }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 一二级规格数据 -->
				<view style="max-height: 700rpx; overflow: auto">
					<view v-for="(item, index) in getFirstAndSecondCategory()" :key="index" class="choice">
						<view class="title">{{ item.name }}</view>
						<text v-for="(itemChild, indexChild) in item.values" :key="indexChild" @click="
                handleSkuClick(
                  itemChild && itemChild.productSpecId,
                  currentSku.specAll[index].platformSpecId,
                  index === 0,
				  indexChild
                )
              " :class="{'title-item': true, 'title-item-disabled': index == 1 && !checkCurrentSecondCategoryExists(itemChild.productSpecId) }"
							:style="{
                border:
                  currentSku.specAll[index].platformSpecId ===
                  itemChild.productSpecId
                    ? '2rpx solid #F8A11F'
                    : '2rpx solid #F2F2F2',
                background:
                  currentSku.specAll[index].platformSpecId ===
                  itemChild.productSpecId
                    ? '#FFFBF1'
                    : '#F2F2F2',
              }">
							{{ itemChild.name }}
						</text>
					</view>
					<view class="choice">
						<view class="title">租期</view>
						<text v-for="(day, index) in allDays" :key="index"
							:class="{'title-item': true, 'title-item-disabled': !checkDayIsExists(day)}"
							@click="getDays(day)" :style="{
                border:
                  choiceDays === day
                    ? '2rpx solid #F8A11F'
                    : '2rpx solid #F2F2F2',
                background: choiceDays === day ? '#FFFBF1' : '#F2F2F2',
              }">
							{{ day }}天
						</text>
					</view>
				</view>
				<view style="display: flex; justify-content: center">
					<button class="an" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="onGetPhone">
						确定
					</button>
				</view>
			</view>
		</wyb-popup>
		<!-- 优惠券popup -->
		<wyb-popup ref="couponList" type="bottom" width="500" radius="6" :showCloseIcon="true" title="优惠券"
			bgColor="rgba(247, 248, 251, 1)">
			<view class="coupons">
				<view class="coupon-item" v-for="(item, index) in couponList" :key="index">
					<view class="item-left">
						<view style="width: 200rpx">
							<view class="title">
								<text style="font-size: 24rpx">￥</text>
								{{ item.discountAmount }}
							</view>
							<view class="fu">满{{ item.minAmount }}可用</view>
						</view>
						<view class="item-content">
							<view class="title">{{ item.title }}</view>
							<view class="fu">
								<text class="b"></text>
								领取后{{ item.delayDayNum }}天有效
							</view>
							<view class="fu">
								<text class="b"></text>
								{{ item.rangeStr }}
							</view>
						</view>
					</view>
					<view class="item-right">
						<view class="bindno" v-if="!item.bind" @click="onBindCoupon(item.templateId)">
							立即领取
						</view>
						<view v-else class="bindyes">已领取</view>
					</view>
				</view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
	import dot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	import tTable from "@/components/t-table/t-table.vue"
	import tTr from "@/components/t-table/t-tr.vue"
	import tTd from "@/components/t-table/t-td.vue"
	import mpHtml from "@/components/mp-html/mp-html"
	import wybPopup from "@/components/wyb-popup/wyb-popup.vue"
	import ProductItem from "../../components/productItem/productItem.vue"
	import XinjiuSlot from "../../components/productItem/slots/xinjiu.vue"
	import uniNoticeBar from "../../components/uni-notice-bar/uni-notice-bar.vue"
	import {
		businessInformation,
		businessProducts
	} from '../../api/index.js'
	import {
		getZWZUserDetail,
		checkHasPhone,
		loginHandler,
		getAdPubCode
	} from "@/utils/index.js"
	import {
		OLD_NEW_MAP,
		EMPTY_PLACEHOLDER,
		freightTypeObj,
		tabsDetails,
		shareConfigObj,
	} from "../../utils/constant.js"

	// TODO: 测试一下显示加个，以及下单
	export default {
		data() {
			return {
				   productName:'',//产品名称
					shopId:'',//店铺id
				shopName: '', //店铺名称
				shopLogo: '', //店铺logo
				favorableRate: '', //好评率
				salesVolume: '', //销售额
				background: '', //店铺背景图
				specsList: [], //接口productSkuses里的数据
				num: '', //price最低的那个索引
				userLevel: '', //用户等级
				rentGoodsId: '', //接口返回的芝麻商品id
				credit_goodsid: '', //平台跳转过来的芝麻商品id
				minPrice: '', //最低价
				exclusivePrice: '', //专享价
				imgList: [], //商品banner图列表
				current: 0, //商品图下标
				data: {}, //全局数据
				tabs: tabsDetails, //商品详情tab
				selectCurrent: 0, //商品tab下标
				information: this.$getGlobalData("information"),
				couponList: [], //优惠券列表
				recommendLite: [], //为你推荐商品列表
				productId: "", //商品id
				currentSku: {}, // 当前选中的租期、规格对象；默认值是接口返回productSkuses的第一个数据
				choiceDays: 1, //租期天数
				choiceCycs: {}, //租期数据
				buyOutSupportType: {
					1: "随时买断",
					2: "到期买断",
					0: "",
				},
				returnRuleType: {
					1: "随时归还",
					2: "到期归还",
				},
				thirdId: getZWZUserDetail().thirdId,
				collected: false, //是否收藏
			}
		},
		components: {
			dot,
			tTable,
			mpHtml,
			tTr,
			tTd,
			wybPopup,
			ProductItem,
			XinjiuSlot,
			uniNoticeBar,
		},
		onLoad(e) {
			this.productId = this.$getPageParams(e, "productId")
			// 活动页跳转进来的 存了参数
			if (this.$getGlobalData("credit_goodsid") && this.$getGlobalData("exclusivePrice")) {
				this.credit_goodsid = this.$getGlobalData("credit_goodsid")
				this.exclusivePrice = this.$getGlobalData("exclusivePrice")
			}
			// 没存参数
			else {
				this.credit_goodsid = ''
				this.exclusivePrice = ''
			}
			// 从活动页跳转
			// console.log(this.$getGlobalData("credit_goodsid"), "credit_goodsid缓存")
			this.credit_goodsid = this.$getGlobalData("credit_goodsid")
			this.exclusivePrice = this.$getGlobalData("exclusivePrice")

			// console.log(this.credit_goodsid, "第一次进入页面的蚂蚁id ")
			// console.log(this.userLevel, '第一次进入页面的等级')
			// console.log(this.exclusivePrice, '第一次进入页面的专项价')
			//获取商品数据
			this.$request(
					"hzsx/aliPay/product/getProductDetailLite", {
						itemId: this.productId,
					},
					"get",
					true,
					true
				)
				.then((res) => {
					this.shopId=res.shopId
					console.log(this.shopId,"this.shopId")
					this.businessInformation()
					// console.log(res.shopId,"shopId")
					// console.log(res.productSkuses, "res.productSkuses")
					let skuList = res.productSkuses.map(item => {
						return item.cycs
					})
					// console.log(skuList, "skuList")
					this.specsList = skuList
					// 遍历接口中所有的price
					let priceList = skuList.map(p => {
						return p[0].price
					})
					// console.log(priceList, "priceList")
					// 拿到price最小的那个数
					var smallPrice = Math.min.apply(null, priceList)
					// console.log(smallPrice, "smallPrice")
					// 查找price最小那个数的索引
					this.num = priceList.findIndex(value => value == smallPrice)
					// console.log(this.num, "this,num")
					// console.log(skuList[this.num], "price最小的sku")
					// 根据price最小的那个索引num去遍历里面的所有项数,再塞进finalList里
					let finalList = skuList[this.num].map(t => {
						let priceObj = {}
						priceObj.aprice = t.aprice
						priceObj.bprice = t.bprice
						priceObj.cprice = t.cprice
						priceObj.sprice = t.sprice
						return priceObj
					})
					// 如果链接跳转过来的exclusivePrice跟finalList[0].aprice相等,那么该用户的等级就是A，以此类推
					// console.log(finalList[0], "price等级")
					// console.log(this.exclusivePrice, "this.exclusivePrice")

					if (this.exclusivePrice === (finalList[0].aprice).toString()) {
						this.userLevel = 'A'
						this.$setGlobalData("userLevel", this.userLevel)
						// console.log('该用户是A等级')
					}
					if (this.exclusivePrice === (finalList[0].bprice).toString()) {
						this.userLevel = 'B'
						this.$setGlobalData("userLevel", this.userLevel)
						// console.log('该用户是B等级')
					}
					if (this.exclusivePrice === (finalList[0].cprice).toString()) {
						this.userLevel = 'C'
						this.$setGlobalData("userLevel", this.userLevel)
						// console.log('该用户是C等级')
					}
					if (this.exclusivePrice === (finalList[0].sprice).toString()) {
						this.userLevel = 'S'
						this.$setGlobalData("userLevel", this.userLevel)
						// console.log('该用户是S等级')
					}
					// console.log(this.userLevel, '定完级后的等级')
					// console.log(this.credit_goodsid, "定完级后的蚂蚁id ")
					// console.log(this.exclusivePrice, '定完级后的专项价')

					this.rentGoodsId = res.rentGoodsId
					//如果商品下架跳商品详情页面
					this.imgList = res.images
					this.data = res
					const initSkuObj = res.productSkuses[0] || {}
					this.currentSku = initSkuObj

					// 选中最大租期，并不一定是数组第一个数据
					const initCycsList = initSkuObj.cycs || [] // 租期列表
					const sortCb = (o1, o2) => o2.days - o1.days
					initCycsList.sort(sortCb) // 按租期从大到小排序
					const initCycsObj = initCycsList[0] || {} // 默认最大租期
					this.choiceCycs = initCycsObj
					this.choiceDays = initCycsObj.days || 1
					this.collected = res.collected
					this.getCoupon()
					this.getRecommendLite()
				})
				.catch((res) => {
					if (res.errorCode === "RPC000011")
						this.$onTo(
							`/pages/offShelves/offShelves?productId=${this.productId}`,
							false,
							true
						)
				})
		},
		onShareAppMessage() {
			return {
				...shareConfigObj,
				path: `/pages/product/product?productId=${this.productId}`
			}
		},
		computed: {
			allDays: function() {
				const skuList = this.data?.productSkuses || [] // 商品的sku列表
				// 每个sku对象里面对应了租期列表
				let dayArr = []
				skuList.forEach(skuObj => {
					const currentSkuCycles = skuObj?.cycs || [] // 当前sku所对应的租期列表数据
					currentSkuCycles.forEach(cycleObj => {
						const day = cycleObj?.days
						if (day && !dayArr.includes(day)) { // 副作用：过滤掉了非真租期
							dayArr.push(day)
						}
					})
				})
				dayArr = dayArr.sort((n1, n2) => n1 - n2)
				return dayArr
			}
		},

		methods: {
			// 进店逛逛
			enterStore() {
				uni.navigateTo({
					url: '../shop/shop?shopId=' + this.shopId + '&shopName=' + this.shopName 
				})
			},
			// 商家信息
			businessInformation() {
				businessInformation({
					method: 'GET',
					data: {
						shopId:this.shopId,
						timestamp: Date.parse(new Date())
					}
				}).then(res => {
					if (res.statusCode === 200) {
						this.shopName = res.data.shop.name
						this.shopLogo = res.data.shop.logo
						this.favorableRate = res.data.shop.favorableRate
						this.salesVolume = res.data.shop.salesVolume
						this.background = res.data.shop.background
					}
				})
			},
			/**
			 * 查找最低的市场售价
			 */
			returnMinMarketPrice() {
				const skuList = this.data?.productSkuses || [] // 租期列表
				let min = skuList[0]?.marketPrice || 0
				for (const skuObj of skuList) {
					const {
						marketPrice
					} = (skuObj || {})
					if (marketPrice < min) {
						min = marketPrice
					}
				}
				return min
			},

			/**
			 * 返回一级规格和二级规格数据
			 */
			getFirstAndSecondCategory() {
				return this.data?.specs || []
			},

			/**
			 * 判断对于当前选中的一级规格来说是否包含该二级规格
			 */
			checkCurrentSecondCategoryExists(id) {
				const currentSpecs = this.currentSku?.specAll || [] // 当前所选中的规格
				const firstSpecObj = currentSpecs[0] || obj
				const firstSpecId = firstSpecObj?.platformSpecId // 一级分类的ID

				let exists = false
				const allSkus = this.data?.productSkuses || [] // 所有sku列表数据
				allSkus.forEach(skuObj => {
					const specAlls = skuObj?.specAll || []
					const fId = specAlls[0]?.platformSpecId
					const sId = specAlls[1]?.platformSpecId

					if (fId == firstSpecId && sId == id) {
						exists = true
						return
					}
				})

				return exists
			},

			// 判断当前勾选天数是否存在
			checkDayIsExists(day) {
				const days = this.currentSku?.cycs || [] // 当前选中sku所拥有的租期列表数据
				let flag = false
				for (const obj of days) {
					if (obj?.days == day) {
						flag = true
						break
					}
				}
				return flag
			},

			/**
			 * 选中租期时触发
			 * @param {Number} dayNum : 租期天数，数字
			 */
			getDays(dayNum) {
				const isDisabled = !this.checkDayIsExists(dayNum)
				if (isDisabled) return
				this.choiceCycs = this.findCycleObjByDay(dayNum) // 根据所选中的天数找出租期对象
				this.choiceDays = dayNum
			},

			/**
			 * 根据租期天数找出租期对象
			 * @param {Number} d : 所选中的租期天数
			 */
			findCycleObjByDay(d) {
				const cycsList = this.currentSku?.cycs || []
				const matchObj = cycsList.find(obj => obj.days == d)
				return matchObj || {}
			},

			/**
			 * 点击规格/颜色的时候触发
			 * @param {*} valueId : 当前所点击的颜色/规格的productSpecId
			 * @param {*} preId : 之前的颜色/规格的productSpecId
			 * @param {*} isChangeFirstCategory : 是否是修改第一级目录
			 */
			handleSkuClick(valueId, preId, isChangeFirstCategory, index) {
				if (valueId === preId) {
					return
				}
				if (!isChangeFirstCategory && !this.checkCurrentSecondCategoryExists(valueId)) { // 点击二级目录 且 该规格不存在
					return
				}
				const productSkuses = this.data?.productSkuses || [] // 该商品所对应的sku列表
				const currentSku = this.currentSku

				// 下面这一步是找出发生修改之后的一二级规格ID数据
				const specIds = currentSku.specAll.map((value) =>
					value.platformSpecId === preId ? valueId : value.platformSpecId
				)

				// 下面这一步是找出新的sku对象，根据一二级skuID去匹配
				let newCurrentSku = {}
				if (productSkuses.length) {
					newCurrentSku = productSkuses.find((sku) => {
						let returnVal = true
						sku.specAll.forEach((value) => {
							if (specIds.indexOf(value.platformSpecId) < 0) {
								returnVal = false
							}
						})
						return returnVal
					})
				}

				if (!newCurrentSku && isChangeFirstCategory) {
					// 修改了一级分类后，很可能当前选中的二级分类并不存在，那么此时帮用户选中第一个二级分类
					newCurrentSku =
						productSkuses.find((sku) => {
							if (sku.specAll[0].platformSpecId === valueId) { // 匹配一级分类即可
								return true
							}
							return false
						}) || {}
				}

				// 判断当前选中的天数是否需要进行重置
				const newCycleList = newCurrentSku.cycs // 新规格的租期对象列表数据
				const oldActiveDay = this.choiceDays // 当前已选中的租期

				const exists = newCycleList.find(obj => obj.days == oldActiveDay) != undefined // 判断当前选中的租期在新sku的租期列表中是否存在

				let newActiveDay = oldActiveDay
				if (!exists) { // 当前选中的租期在新的sku中不存在，那么帮用户降级
					const sortCb = (o1, o2) => o2.days - o1.days
					const tempList = newCycleList.sort(sortCb) // 副作用：从大到小排序了，如果这个数据会直接用来进行UI展示，那么会出现天数从大到小显示的bug
					newActiveDay = tempList[0]?.days
				}

				this.currentSku = newCurrentSku // 这步必须在findCycleObjByDay上面
				this.choiceDays = newActiveDay
				this.choiceCycs = this.findCycleObjByDay(newActiveDay)
			},

			//获取商品banner图下标
			onBanner(e) {
				this.current = e.detail.current
			},
			//领取优惠券
			onBindCoupon(templateId) {
				this.$request(
					"/hzsx/lite/couponCenter/bindCoupon", {
						templateId,
						phone: getZWZUserDetail().telephone,
						uid: this.$getUid(),
					},
					"post"
				).then((res) => {
					uni.showToast({
						title: res.data
					})
					this.getCoupon()
				})
			},
			//获取为你推荐列表
			getRecommendLite() {
				this.$request(
					"/hzsx/aliPay/product/recommendLite", {
						productId: this.productId
					},
					"get"
				).then((res) => {
					this.recommendLite = res.data
				})
			},
			//获取优惠券列表
			getCoupon() {
				this.$request(
					"hzsx/lite/couponCenter/getProductCoupon", {
						productId: this.productId
					},
					"get",
					true
				).then((res) => {
					this.couponList = res.data
				})
			},
			//运费对应
			getfreight() {
				return freightTypeObj[this.data.freightType] || EMPTY_PLACEHOLDER
			},
			getOldNewText(oldNewDegree) {
				const level = oldNewDegree // 新旧程度标识
				return OLD_NEW_MAP[level] || EMPTY_PLACEHOLDER
			},
			/**
			 * 获取金额的小数点前、后的数据
			 * @param {Boolean} isFront : 是否是前半部分
			 */
			getPartMoney(isFront, price) {
				const _price = price || ""
				if (!_price) return EMPTY_PLACEHOLDER
				const list = _price.toString().split(".")
				const result = isFront ? list[0] : list[1]
				return result || 0
			},
			//切换为你推荐tab
			onSelectCurrent(i) {
				this.selectCurrent = i
			},
			//拉起手机电话
			onPhone() {
				const index = Math.floor((Math.random() * this.data.platformServiceTelList.length));
				uni.makePhoneCall({
					phoneNumber: this.data.platformServiceTelList[index],
				})
			},

			//提交订单
			onConfirm() {
				let price = ''
				if (this.userLevel === '') {
					price = this.choiceCycs.price
				}
				if (this.userLevel === 'A') {
					price = this.choiceCycs.aprice
				}
				if (this.userLevel === 'B') {
					price = this.choiceCycs.bprice
				}
				if (this.userLevel === 'C') {
					price = this.choiceCycs.cprice
				}
				if (this.userLevel === 'S') {
					price = this.choiceCycs.sprice
				}
				// console.log(this.choiceCycs.aprice, "choiceCycs.aprice")
				// console.log(this.choiceCycs.bprice, "choiceCycs.bprice")
				// console.log(this.choiceCycs.cprice, "choiceCycs.cprice")
				// console.log(this.choiceCycs.sprice, "choiceCycs.sprice")
				// console.log(this.choiceCycs.price, "choiceCycs.price")
				this.$setGlobalData("productIdForXieyi", this.productId) // 保存产品ID，confirm页面的相关接口并没有返回该相关信息
				this.$onTo(
					`pages/confirm/confirm?duration=${this.choiceDays}&skuId=${this.currentSku.skuId}&price=${price}`
				)
			},
			//获取手机号
			onGetPhone() {
				let isPhone = checkHasPhone()
				if (isPhone) {
					this.onConfirm()
				} else {
					my.getPhoneNumber({
						success: (res) => {
							let encryptedData = res.response
							this.sucHandler(encryptedData)
						},
						fail: () => {
							uni.showToast({
								title: "授权失败",
								icon: "none",
							})
						},
					})
				}
			},

			//获取到用户的手机号码
			sucHandler(encryString) {
				this.$request(
					"hzsx/api/components/decrypt", {
						content: encryString
					},
					"get",
					true
				).then((res) => {
					let resObj = JSON.parse(res.data)
					if (resObj.code === "10000") {
						let obj = {
							telephone: resObj.mobile,
						}
						loginHandler(true, obj, this.onConfirm, true)
					}
				})
			},

			//收藏
			addProductCollection() {
				this.$request(
					"hzsx/userCollection/addProductCollection", {
						resourceId: this.productId,
						resourceType: "PRODUCT",
						uid: this.$getUid(),
					},
					"post"
				).then((res) => {
					this.collected = true
					uni.showToast({
						title: "收藏成功",
						icon: "none",
					})
				})
			},
			//取消收藏
			cancelProductCollection() {
				this.$request(
					"hzsx/userCollection/cancelProductCollection", {
						resourceId: this.productId,
						resourceType: "PRODUCT",
						uid: this.$getUid(),
					},
					"post"
				).then((res) => {
					if (res) {
						this.collected = false
						uni.showToast({
							title: "取消收藏成功",
							icon: "none",
						})
					}
				})
			},
			/**
			 * 图片预览的时候触发
			 * @param {Number} idx : 预览图片的索引位置
			 */
			previewImgHandler(idx) {
				let _imgList = this.imgList.map((itme) => itme.src)
				uni.previewImage({
					current: idx,
					urls: _imgList,
				})
			},
		},
	}
</script>
<style scoped>
	.businessInformation {
		position: relative;
		background-color: #FFFFFF;
	}

	.left-tit {
		height: 134rpx;
		width: 350rpx;
		padding-left: 0;
		/* border: 1rpx solid pink; */
	}

	.shopTit {
		font-weight: 600;
		font-size: 32rpx;
		color: #666666;
	}

	.ziZhi {
		color: #9F9F9F;
		font-size: 23rpx;
	}

	.serviceBusiness {
		color: #9F9F9F;
		font-size: 23rpx;
		margin-left: 7rpx;
	}
</style>
<style lang="scss">
	page {
		padding-bottom: 150rpx;
	}

	.product {
		.hide {
			display: none;
		}

		.header-banner {
			width: 750rpx;
			height: 750rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			position: relative;

			.header-title {
				position: absolute;
				top: 0;
				width: 100%;
			}

			.swiper-img {
				width: 598rpx;
				height: 558rpx;

				.item {
					width: 598rpx;
					height: 558rpx;
				}
			}

			.label {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 750rpx;
				height: 100rpx;
			}
		}

		.name {
			background-color: #ffffff;
			padding: 20rpx 30rpx 20rpx 30rpx;
			border-radius: 0rpx 0rpx 10rpx 10rpx;

			.title {
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
				// -webkit-line-clamp: 2;
				// position: relative;
				// overflow: hidden;
				font-size: 32rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #333333;
				// line-height: 45rpx;
				// word-break: break-all;
				// padding-top: 20rpx;

				.title-tops {
					height: 45rpx;
					font-size: 22rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FCF4F1;
					line-height: 45rpx;
					padding: 2rpx 15rpx 2rpx 15rpx;
					background-color: #FB8363;
					// @include global-background-color();
					border-radius: 10rpx;
					margin-right: 8rpx;
					margin-bottom: 3rpx;
				}

				.title-text {
					
					// font-size: 40rpx;
					font-weight: 500;
					position: relative;
					top: 0;
					color: #020202;
				}
			}

			.labels {
				
				.items {
					display: flex;

					.item {
						// border: 1rpx solid #e52021;
						// border-radius: 5rpx;
						height: 30rpx;
						font-size: 27rpx;
						font-weight: 400;
						color: #e52021;
						line-height: 30rpx;
						padding: 1rpx 8rpx 1rpx 8rpx;
						// margin-right: 5rpx;
					}
				}
			}
			.leased{
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-left: 10rpx;
				margin-bottom: 3rpx;
			}

	.price-area1 {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: space-between;

				.left1 {
					color: #e52021;

					.m {
						font-size: 24rpx;
						margin-right: 6rpx;
					}

					.l {
						font-size: 50rpx;
						font-weight: 500;
					}

					.d {
						font-size: 24rpx;
					}

					.r {
						font-size: 22rpx;
						font-weight: 500;
					}
				}

				.right1 {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-left: 10rpx;
					margin-bottom: 3rpx;
				}
			}
			.price-area {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: space-between;
				padding-bottom: 31rpx;

				.left {
					color: #e52021;

					.m {
						font-size: 24rpx;
						margin-right: 6rpx;
					}

					.l {
						font-size: 50rpx;
						font-weight: 500;
					}

					.d {
						font-size: 24rpx;
					}

					.r {
						font-size: 22rpx;
						font-weight: 500;
					}
				}

				.right {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-left: 10rpx;
					margin-bottom: 3rpx;
				}
			}
		}

		.select-content {
			margin: 20rpx 0;
			background-color: #ffffff;
			padding: 0 30rpx;
			border-radius: 10rpx;

			.describe {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #979aaa;
				font-size: 26rpx;

				.pd {
					padding: 20rpx 0;
				}

				.red {
					color: #e52021;
				}

				.arrow {
					width: 10rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}

				.black {
					color: #333;
				}
			}
		}

		.details {
			margin: 20rpx 0;
			background-color: #ffffff;
			padding: 0 40rpx;
			border-radius: 10rpx;

			.tabs {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-top: 30rpx;

				.item {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;

					.select {
						width: 60rpx;
						height: 6rpx;
						@include global-background-color();
						border-radius: 3rpx;
						margin: 0 auto;
						margin-top: 10rpx;
					}
				}
			}

			.parameter {
				font-size: 38rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #14151a;
				margin-top: 40rpx;

				.parameterItem {
					margin-top: 30rpx;
					margin-bottom: 80rpx;
				}
			}
		}

		.explain {
			.explain-img {
				width: 676rpx;
				height: 1361rpx;
				margin-top: 40rpx;
				margin-bottom: 55rpx;
			}
		}

		.footer {
			width: 100%;
			height: 126rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			// justify-content: space-around;
			padding-bottom: 30rpx;
			z-index: 1999;

			.home {
				text-align: center;

				.home-img {
					width: 36rpx;
					height: 36rpx;
				}

				.text {
					font-size: 18rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1f2129;
					line-height: 12rpx;
				}
			}

			.bot {
				width: 268rpx;
				height: 80rpx;
				background: #1f2129;
				border-radius: 10rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #ffffff;
				text-align: center;
				line-height: 80rpx;
			}

			.bot_my {
				width: 268rpx;
				height: 80rpx;
				@include global-background-color();
				border-radius: 10rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				text-align: center;
				line-height: 80rpx;
			}
		}

		.contact {
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 30rpx;
				margin-top: 30rpx;

				.item-left {
					.title {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					.fu {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						padding-top: 8rpx;
					}
				}

				.item-right {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.coupons {
			max-height: 750rpx;
			overflow: auto;
			padding-bottom: 30rpx;

			.coupon-item {
				width: 650rpx;
				height: 170rpx;
				background: #ffffff;
				border-radius: 10rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item-left {
					text-align: center;
					display: flex;

					.title {
						font-size: 62rpx;
						font-weight: 500;
						color: #ff4a26;
					}

					.fu {
						font-size: 22rpx;
						font-weight: 400;
						color: #ff4a26;
					}
				}

				.item-content {
					margin-left: 47rpx;
					text-align: left;

					.title {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						margin-bottom: 10rpx;
					}

					.fu {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						display: flex;
						align-items: center;

						.b {
							display: inline-block;
							margin-right: 10rpx;
							width: 6rpx;
							height: 6rpx;
							background: #999999;
							border-radius: 50%;
						}
					}
				}

				.item-right {
					.bindno {
						width: 130rpx;
						height: 52rpx;
						border-radius: 26rpx;
						border: 1px solid #ff4a26;
						text-align: center;
						line-height: 52rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #ff4a26;
					}

					.bindyes {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}

		.wntj {
			.imgtitle {
				width: 167rpx;
				height: 42rpx;
			}
		}

		.productList {
			padding: 20rpx;
			column-count: 2;
			column-gap: calc(100% - 344rpx * 2);

			.product-item {
				width: 344rpx;
				break-inside: avoid; // 这个属性很重要，可以避免首位塌陷
			}
		}

		.productDetails {
			margin-bottom: 160rpx;
			padding-bottom: 30rpx;

			.shop {
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;

				.img {
					width: 165rpx;
					height: 165rpx;
					margin-right: 20rpx;
				}

				.content {
					display: flex;
					justify-content: center;

					.fut {
						font-size: 22rpx;
						font-weight: 500;
						color: #333333;
						padding: 1px 5px;
						@include global-background-color();
						border-radius: 2px;
						margin-top: 10rpx;
						margin-right: 10rpx;
					}
				}
			}

			.choice {
				padding: 0 30rpx;
				margin-bottom: 44rpx;

				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.title-item {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					padding: 10rpx 22rpx;
					background: #f2f2f2;
					border-radius: 10rpx;
					margin-right: 20rpx;
					display: inline-block;
					margin-bottom: 20rpx;
				}

				.title-item-disabled {
					opacity: 0.4;
				}
			}

			.an {
				height: 97rpx;
				@include global-background-color();

				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				position: fixed;
				bottom: 50rpx;
				border: beige;
				width: 690rpx;
				height: 90rpx;
				border-radius: 20rpx;
				line-height: 90rpx;
			}

			.content {
				.price-area {
					.left {
						color: #333333;

						.m {
							font-size: 24rpx;
							margin-right: 6rpx;
						}

						.l {
							font-size: 48rpx;
							font-weight: 500;
						}

						.d {
							font-size: 24rpx;
						}

						.r {
							font-size: 22rpx;
							font-weight: 500;
						}
					}

					.center {
						.z {
							font-size: 23rpx;
							font-weight: 400;
						}

						.m {
							font-size: 24rpx;
							margin-left: 6rpx;
						}

						.l {
							font-size: 23rpx;
							font-weight: 400;
						}
					}

					.right {
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
